<template>
  <svg-icon
    :icon-name="iconName"
    custom-class="h-[28px] w-[28px] cursor-pointer"
    @click="toggle"
  ></svg-icon>
</template>

<script setup lang="ts" name="ScreenFull">
import screenfull from "screenfull"
import { useAppStore } from "@/store"

const appStore = useAppStore()
const iconName = ref("ant-design:fullscreen-outlined")
// const isFullscreen = ref(false)

const toggle = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle()
  }

  console.log("isFullscreen", appStore.state.fullScreen)
}
const handleFullscreen = () => {
  appStore.toggleFullScreen(screenfull.isFullscreen)
  iconName.value = appStore.state.fullScreen
    ? "ant-design:fullscreen-exit-outlined"
    : "ant-design:fullscreen-outlined"
}

onMounted(() => {
  screenfull.on("change", handleFullscreen)
})

onBeforeUnmount(() => {
  screenfull.off("change", handleFullscreen)
})
</script>
